<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
  <meta charset="utf-8">
  <title>Forms</title>
  <!-- Mobile specific metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- Force IE9 to render in normal mode -->
  <!--[if IE]>
  <meta http-equiv="x-ua-compatible" content="IE=9"/><![endif]-->
  <meta name="author" content="SuggeElson"/>
  <meta name="description" content=""
  />
  <meta name="keywords" content=""
  />
  <meta name="application-name" content="sprFlat admin template"/>
  <!-- Import google fonts - Heading first/ text second -->
  <link rel='stylesheet' type='text/css'
  <!--[if lt IE 9]>

  <![endif]-->
  <!-- Css files -->
  <!-- Icons -->
  <link href="/assets/css/icons.css" rel="stylesheet"/>
  <!-- jQueryUI -->
  <link href="/assets/css/sprflat-theme/jquery.ui.all.css" rel="stylesheet"/>
  <!-- Bootstrap stylesheets (included template modifications) -->
  <link href="/assets/css/bootstrap.css" rel="stylesheet"/>
  <!-- Plugins stylesheets (all plugin custom css) -->
  <link href="/assets/css/plugins.css" rel="stylesheet"/>
  <!-- Main stylesheets (template main css file) -->
  <link href="/assets/css/main.css" rel="stylesheet"/>
  <!-- Custom stylesheets ( Put your own changes here ) -->
  <link href="/assets/css/custom.css" rel="stylesheet"/>
  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144"
        href="/assets/img/ico/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114"
        href="/assets/img/ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72"
        href="/assets/img/ico/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed"
        href="/assets/img/ico/apple-touch-icon-57-precomposed.png">
  <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
  <!-- Windows8 touch icon ( http://www.buildmypinnedsite.com/ )-->
  <meta name="msapplication-TileColor" content="#3399cc"/>

  <link href="/assets/css/jquery.bxslider.css" rel="stylesheet">
  <link href="/assets/css/simplemde.min.css" rel="stylesheet">
  <link href="/assets/css/jquery-confirm.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.css"
        rel="stylesheet">
</head>
<body>
<!-- Start #header -->
<div th:replace="/layout/header"></div>
<!-- End #header -->
<!-- Start #sidebar -->
<div th:replace="/layout/sidebar"></div>

<!-- End #sidebar -->
<!-- Start #right-sidebar -->
<div id="right-sidebar" class="hide-sidebar">
  <!-- Start .sidebar-inner -->
  <div class="sidebar-inner">
    <div class="sidebar-panel mt0">
      <div class="sidebar-panel-content fullwidth pt0">
        <div class="chat-user-list">
          <form class="form-horizontal chat-search" role="form">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search for user...">
              <button type="submit"><i class="ec-search s16"></i>
              </button>
            </div>
            <!-- End .form-group  -->
          </form>
          <ul class="chat-ui bsAccordion">
            <li>
              <a href="#">Favorites <span class="notification teal">4</span><i
                  class="en-arrow-down5"></i></a>
              <ul class="in">
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/49.jpg" alt="@chadengle">Chad
                    Engle
                    <span class="has-message"><i class="im-pencil"></i></span>
                  </a>
                  <span class="status online"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/54.jpg" alt="@alagoon">Anthony
                    Lagoon</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/52.jpg" alt="@koridhandy">Kory
                    Handy</a>
                  <span class="status"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/50.jpg" alt="@divya">Divia
                    Manyan</a>
                  <span class="status"><i class="en-dot"></i></span>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Online <span class="notification green">3</span><i
                  class="en-arrow-down5"></i></a>
              <ul class="in">
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/51.jpg" alt="@kolage">Eric
                    Hofman</a>
                  <span class="status online"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/55.jpg" alt="@mikebeecham">Mike
                    Beecham</a>
                  <span class="status online"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/53.jpg" alt="@derekebradley">Darek
                    Bradly</a>
                  <span class="status online"><i class="en-dot"></i></span>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Offline <span class="notification red">5</span><i
                  class="en-arrow-down5"></i></a>
              <ul>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/56.jpg" alt="@laurengray">Lauren
                    Grey</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/49.jpg" alt="@chadengle">Chad
                    Engle</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/58.jpg"
                         alt="@frankiefreesbie">Frankie Freesibie</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/57.jpg" alt="@joannefournier">Joane
                    Fornier</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
                <li>
                  <a href="#" class="chat-name">
                    <img class="chat-avatar" src="/assets/img/avatars/59.jpg" alt="@aiiaiiaii">Alia
                    Alien</a>
                  <span class="status offline"><i class="en-dot"></i></span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="chat-box">
          <h5>Chad Engle</h5>
          <a id="close-user-chat" href="#" class="btn btn-xs btn-primary"><i
              class="en-arrow-left4"></i></a>
          <ul class="chat-ui chat-messages">
            <li class="chat-user">
              <p class="avatar">
                <img src="/assets/img/avatars/49.jpg" alt="@chadengle">
              </p>
              <p class="chat-name">Chad Engle <span class="chat-time">15 seconds ago</span>
              </p>
              <span class="status online"><i class="en-dot"></i></span>
              <p class="chat-txt">Hello Sugge check out the last order.</p>
            </li>
            <li class="chat-me">
              <p class="avatar">
                <img src="/assets/img/avatars/48.jpg" alt="SuggeElson">
              </p>
              <p class="chat-name">SuggeElson <span class="chat-time">10 seconds ago</span>
              </p>
              <span class="status online"><i class="en-dot"></i></span>
              <p class="chat-txt">Ok i will check it out.</p>
            </li>
            <li class="chat-user">
              <p class="avatar">
                <img src="/assets/img/avatars/49.jpg" alt="@chadengle">
              </p>
              <p class="chat-name">Chad Engle <span class="chat-time">now</span>
              </p>
              <span class="status online"><i class="en-dot"></i></span>
              <p class="chat-txt">Thank you, have a nice day</p>
            </li>
          </ul>
          <div class="chat-write">
            <form action="#" class="form-horizontal" role="form">
              <div class="form-group">
                <textarea name="sendmsg" id="sendMsg" class="form-control elastic"
                          rows="1"></textarea>
                <a role="button" class="btn" id="attach_photo_btn">
                  <i class="fa-picture s20"></i>
                </a>
                <input type="file" name="attach_photo" id="attach_photo">
              </div>
              <!-- End .form-group  -->
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End .sidebar-inner -->
</div>
<!-- End #right-sidebar -->
<!-- Start #content -->
<div id="content">
  <!-- Start .content-wrapper -->
  <div class="content-wrapper">
    <div class="row">
      <!-- Start .row -->
      <!-- Start .page-header -->
      <div class="col-lg-12 heading">
        <h1 class="page-header"><i class="im-paragraph-justify"></i> Forms</h1>
        <!-- Start .bredcrumb -->
        <ul id="crumb" class="breadcrumb">
        </ul>
        <!-- End .breadcrumb -->
        <!-- Start .option-buttons -->
        <div class="option-buttons">
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
              <a id="clear-localstorage" class="btn tip" title="Reset panels position">
                <i class="ec-refresh color-red s24"></i>
              </a>
            </div>
            <div class="btn-group dropdown">
              <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"><i
                  class="br-grid s24"></i></a>
              <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                <div class="option-dropdown">
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="im-pie"></i>
                      <span>Earning Stats</span>
                    </a>
                  </div>
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="ec-images color-dark"></i>
                      <span>Gallery</span>
                    </a>
                  </div>
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="en-light-bulb color-orange"></i>
                      <span>Fresh ideas</span>
                    </a>
                  </div>
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="ec-link color-blue"></i>
                      <span>Links</span>
                    </a>
                  </div>
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="ec-support color-red"></i>
                      <span>Support</span>
                    </a>
                  </div>
                  <div class="shortcut-button">
                    <a href="#">
                      <i class="st-lock color-teal"></i>
                      <span>Lock area</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn-group dropdown">
              <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2"><i
                  class="ec-pencil s24"></i></a>
              <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
                <div class="option-dropdown">
                  <div class="row">
                    <p class="col-lg-12">Quick post</p>
                    <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <div class="col-lg-12">
                          <input type="text" class="form-control" placeholder="Enter title">
                        </div>
                      </div>
                      <!-- End .form-group  -->
                      <div class="form-group">
                        <div class="col-lg-12">
                          <textarea class="form-control wysiwyg"
                                    placeholder="Enter text"></textarea>
                        </div>
                      </div>
                      <!-- End .form-group  -->
                      <div class="form-group">
                        <div class="col-lg-12">
                          <input type="text" class="form-control tags1" placeholder="Enter tags">
                        </div>
                      </div>
                      <!-- End .form-group  -->
                      <div class="form-group">
                        <div class="col-lg-12">
                          <button class="btn btn-default btn-xs">Save Draft</button>
                          <button class="btn btn-success btn-xs pull-right">Publish</button>
                        </div>
                      </div>
                      <!-- End .form-group  -->
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu3"><i
                  class="ec-help s24"></i></a>
              <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu3">
                <div class="option-dropdown">
                  <p>First time visitor ? <a href="#" id="app-tour" class="btn btn-success ml15">Take
                    app tour</a>
                  </p>
                  <hr>
                  <p>Or check the <a href="#" class="btn btn-danger ml15">FAQ</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End .option-buttons -->
      </div>
      <!-- End .page-header -->
    </div>
    <!-- End .row -->
    <div class="outlet">
      <!-- Start .outlet -->
      <!-- Page start here ( usual with .row ) -->
      <div class="row">
        <!-- Start .row -->
        <div class="col-lg-12">
          <!-- Start col-lg-12 -->
          <div class="panel panel-default toggle">
            <!-- Start .panel -->
            <div class="panel-heading">
              <h3 class="panel-title">发布文章</h3>
            </div>
            <div class="panel-body">
              <form class="form-horizontal group-border hover-stripped" role="form" id="validate">
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">标题</label>
                  <div class="col-lg-8 col-md-8">
                    <input type="text" class="form-control required" placeholder=""
                           autofocus="autofocus" name="title">
                  </div>
                  <div class="col-lg-2 col-md-2">
                    <input class="check" type="checkbox" name="original">原创
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">封面</label>
                  <div class="col-lg-10 col-md-10">
                    <input type="file" class="form-control" name="coverFile" id="coverFile"
                           onchange="uploadCover()">
                  </div>
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label"></label>
                  <div class="col-lg-2 col-md-2 col-sm-12" style="margin: 10px"
                       id="converImg"></div>
                  <input type="hidden" name="coverUrl" id="coverUrl">
                </div>

                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">内容</label>
                  <div class="col-lg-10 col-md-10">
                    <div id="test-editormd">
                      <div class="form-group">
                        <textarea name="article" id="articleCtn" cols="20" rows="10"></textarea>
                        <textarea name="content" id="articleContent" cols="20" rows="10"
                                  style="display: none"></textarea>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">分类</label>
                  <div class="col-lg-10 col-md-10">
                    <div class="row">
                      <div class="col-lg-6 col-md-6">
                        <select class="form-control" name="typeId" id="typeId">
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End .form-group  -->
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">标签</label>
                  <div class="col-lg-10 col-md-10">
                    <div class="row">
                      <div class="col-lg-6 col-md-6">
                        <select class="form-control" name="tags" id="tags">
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End .form-group  -->
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">状态</label>
                  <label class="radio-inline">
                    <input type="radio" name="status" checked="checked" value="1">发布
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="status" value="0">草稿
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">摘要</label>
                  <div class="col-lg-10 col-md-10">
                    <textarea class="form-control limitTextarea" maxlength="250"
                              rows="3" name="description"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 col-md-2 col-sm-12 control-label">关键字</label>
                  <div class="col-lg-10 col-md-10">
                    <input type="text" class="form-control tags" value="" name="keywords">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-lg-4 col-md-4"></div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <button class="btn btn-success btn-primary" id="save">保存</button>
                    <button class="btn btn-default" type="reset">重置</button>
                  </div>
                </div>
                <!-- End .form-group  -->

              </form>
            </div>
          </div>
          <!-- End .panel -->
        </div>
        <!-- End col-lg-12 -->
      </div>
      <!-- End .row -->

      <!-- Page End here -->
    </div>
    <!-- End .outlet -->
  </div>
  <!-- End .content-wrapper -->
  <div class="clearfix"></div>
</div>
<!-- End #content -->
<!-- Javascripts -->
<!-- Load pace first -->
<script src="/assets/plugins/core/pace/pace.min.js"></script>
<!-- Important javascript libs(put in all pages) -->
<script src="/assets/js/jquery-1.8.3.min.js"></script>
<script>
  window.jQuery || document.write('<script src="/assets/js/libs/jquery-2.1.1.min.js">\x3C/script>')
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
  window.jQuery || document.write(
      '<script src="/assets/js/libs/jquery-ui-1.10.4.min.js">\x3C/script>')
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/assets/js/libs/excanvas.min.js"></script>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="/assets/js/libs/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap plugins -->
<script src="/assets/js/bootstrap/bootstrap.js"></script>
<!-- Core plugins ( not remove ever) -->
<!-- Handle responsive view functions -->
<script src="/assets/js/jRespond.min.js"></script>
<!-- Custom scroll for sidebars,tables and etc. -->
<script src="/assets/plugins/core/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/core/slimscroll/jquery.slimscroll.horizontal.min.js"></script>
<!-- Resize text area in most pages -->
<script src="/assets/plugins/forms/autosize/jquery.autosize.js"></script>
<!-- Proivde quick search for many widgets -->
<script src="/assets/plugins/core/quicksearch/jquery.quicksearch.js"></script>
<!-- Bootbox confirm dialog for reset postion on panels -->
<script src="/assets/plugins/ui/bootbox/bootbox.js"></script>
<!-- Other plugins ( load only nessesary plugins for every page) -->
<script src="/assets/plugins/core/moment/moment.min.js"></script>
<script src="/assets/plugins/charts/sparklines/jquery.sparkline.js"></script>
<script src="/assets/plugins/charts/pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/assets/plugins/forms/icheck/jquery.icheck.js"></script>
<script src="/assets/plugins/forms/tags/jquery.tagsinput.min.js"></script>
<script src="/assets/plugins/forms/tinymce/tinymce.min.js"></script>
<script src="/assets/plugins/forms/switch/jquery.onoff.min.js"></script>
<script src="/assets/plugins/forms/maxlength/bootstrap-maxlength.js"></script>
<script src="/assets/plugins/forms/bootstrap-filestyle/bootstrap-filestyle.js"></script>
<script src="/assets/plugins/forms/color-picker/spectrum.js"></script>
<script src="/assets/plugins/forms/daterangepicker/daterangepicker.js"></script>
<script src="/assets/plugins/forms/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/assets/plugins/forms/globalize/globalize.js"></script>
<script src="/assets/plugins/forms/maskedinput/jquery.maskedinput.js"></script>
<script src="/assets/plugins/forms/select2/select2.js"></script>
<script src="/assets/plugins/forms/dual-list-box/jquery.bootstrap-duallistbox.js"></script>
<script src="/assets/plugins/forms/password/jquery-passy.js"></script>
<script src="/assets/plugins/forms/checkall/jquery.checkAll.js"></script>
<script src="/assets/plugins/misc/highlight/highlight.pack.js"></script>
<script src="/assets/plugins/misc/countTo/jquery.countTo.js"></script>
<script src="/assets/js/jquery.sprFlat.js"></script>
<script src="/assets/js/jquery-form.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/pages/forms.js"></script>
<script src="/assets/plugins/forms/validation/jquery.validate.js"></script>
<script src="/assets/plugins/forms/validation/additional-methods.min.js"></script>
<script src="/assets/js/jquery.bxslider.js"></script>
<script src="/assets/js/mooz.scripts.min.js"></script>
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script src="/assets/js/blog.tool.js"></script>
<script src="https://cdn.bootcss.com/jquery-confirm/2.5.1/jquery-confirm.min.js"
        type="text/javascript"></script>
</body>

<script type="text/javascript">

  var simplemde = new SimpleMDE({
    element: document.getElementById("articleCtn")
  });

  $(".editor-preview-side").addClass("markdown-body");

  function saveArticle() {
    var articlePlain = simplemde.value();
    var articleMarkdown = simplemde.markdown(articlePlain);
    alert(articleMarkdown);
    $("#articleContent").val(articleMarkdown);
    $("#article").submit();

  }

  simplemde.codemirror.on("paste", function (editor, e) {
    // console.log(e.clipboardData)
    if (!(e.clipboardData && e.clipboardData.items)) {
      alert("该浏览器不支持操作");
      return;
    }
    for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
      var item = e.clipboardData.items[i];
      // console.log(item.kind+":"+item.type);
      if (item.kind === "string") {
        item.getAsString(function (str) {
          // str 是获取到的字符串
        })
      } else if (item.kind === "file") {
        var pasteFile = item.getAsFile();
        // pasteFile就是获取到的文件
        console.log(pasteFile);
        fileUpload(pasteFile);
      }
    }
  });
  simplemde.codemirror.on("drop", function (editor, e) {
    // console.log(e.dataTransfer.files[0]);
    if (!(e.dataTransfer && e.dataTransfer.files)) {
      alert("该浏览器不支持操作");
      return;
    }
    for (var i = 0; i < e.dataTransfer.files.length; i++) {
      console.log(e.dataTransfer.files[i]);
      fileUpload(e.dataTransfer.files[i]);
    }
    e.preventDefault();
  });

  //文件上传
  function fileUpload(fileObj) {
    var data = new FormData();
    data.append("file", fileObj);
    var xhr = new XMLHttpRequest();
    xhr.open("post", "/article/uploadCover", true);
    xhr.onreadystatechange = function () {

      if (xhr.readyState == 4) {
        var result = xhr.responseText;
        var json = eval("(" + result + ")");
        var pic = "![" + json.data.fileName + "](" + json.data.filePath + ")";
        simplemde.codemirror.setValue(simplemde.codemirror.getValue() + "\n" + pic);
      }
    };
    xhr.send(data);
  }

  //阻止浏览器默认打开拖拽文件的行为
  window.addEventListener("drop", function (e) {
    e = e || event;
    e.preventDefault();
    if (e.target.tagName == "textarea") {  // check wich element is our target
      e.preventDefault();
    }
  }, false);

  $(function () {
    //保存
    $('#save').click(function () {
      var articlePlain = simplemde.value();
      var articleMarkdown = simplemde.markdown(articlePlain);
      $("#articleContent").val(articleMarkdown);
      $('#validate').ajaxForm({
        type: "post",
        url: "/article/save",
        datatype: 'json',
        resetForm: true,
        clearForm: false,
        success: function (result) {
          $.tool.ajaxSuccessConfirm(result, function () {
            window.location.reload();
          });
        },
        error: $.tool.ajaxError
      });
    });

    loadType();
    loadTags();
  })

  // 上传封面
  function uploadCover() {
    var form = new FormData(),
        url = '/article/uploadCover', //服务器上传地址
        file = ($("#coverFile")[0].files)[0];
    form.append('file', file);
    var xhr = new XMLHttpRequest();
    xhr.open("post", url, true);
    xhr.onreadystatechange = function () {
      var result = xhr;
      if (xhr.readyState == 4) {
        var resultData = xhr.responseText;
        var json = eval("(" + resultData + ")");
        $('#converImg').html('<img src="' + json.data.filePath + '" style="width: 100%">')

        $("#coverUrl").val(json.data.filePath);
      }
    }
    xhr.send(form); //开始上传
  }

  //加载分类
  function loadType() {
    $.ajax({
      type: "get",
      url: "/type/listAll",
      success: function (json) {
        var data;
        if (data = json.data) {
          var typeOptions = '';
          for (var i = 0; i < data.length; i++) {
            var type = data[i];
            typeOptions += '<option value="' + type.id + '">' + type.name + '</option>';
          }
          $("select#typeId").html(typeOptions);
        }
      }
    });
  }

  //加载标签
  function loadTags() {
    $.ajax({
      type: "get",
      url: "/tags/listAll",
      success: function (json) {
        var data;
        if (data = json.data) {
          var tagsOptions = '';
          for (var i = 0; i < data.length; i++) {
            var tags = data[i];
            tagsOptions += '<option value="' + tags.id + '">' + tags.name + '</option>';
          }
          $("select#tags").html(tagsOptions);
        }
      }
    });
  }


</script>
</html>